<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="include :: header"></head>
<body class="hold-transition skin-blue sidebar-mini">

<section class="content">
    <div class="row">
        <div class="col-xs-12">
            <div class="box">
                <div class="row"><br>
                    <!--<div class="col-md-2">-->
                        <!--<div class="form-group">-->
                            <!--<label >项目编号：</label><label th:text="${serviceTaskModel.proCode}"></label>-->
                        <!--</div>-->
                    <!--</div>-->
                    <!--<div class="col-md-3">-->
                        <!--<div class="form-group">-->
                            <!--<label>项目名称：</label><label th:text="${serviceTaskModel.proName}"></label>-->
                        <!--</div>-->
                    <!--</div>-->
                    <!--<div class="col-md-2">-->
                        <!--<div class="form-group">-->
                            <!--<label>项目数量：</label><label th:text="${serviceTaskModel.proNum}"></label>-->
                        <!--</div>-->
                    <!--</div>-->
                    <!--<div class="col-md-2">-->
                        <!--<div class="form-group">-->
                            <!--<label>类型：</label><label th:text="${serviceTaskModel.name}"></label>-->
                        <!--</div>-->
                    <!--</div>-->
                    <!--<div class="col-md-2">-->
                        <!--<div class="form-group">-->
                            <!--<label>部分：</label><label th:text="${serviceTaskModel.part}"></label>-->
                        <!--</div>-->
                    <!--</div>-->
                    <button type="button" class="btn btn-success pull-right" id="btn-receive"
                    onclick="selected()"  v-if="form.status === 1" shiro:hasPermission="tec:batchRecep:edit">
                    <span class="Bold">接收</span>
                    </button>
                </div>
                <div class="row" style="margin-top: 64px">
                    <div class="col-xs-10 col-xs-offset-1">
                        <div id="print">
                            <table id="t1" class="t1">
                                <thead style="display: table-header-group">
                                <tr>
                                    <td colspan="11">
                                        <img th:src="@{/img/logo3.jpg}" width="64px" height="40px" style="margin-top: -30px">
                                        <div style="display: inline-block;margin-top: 5px;margin-left: 20px">
                                            <span style="letter-spacing: 24px;display: block;line-height: 20px;font-size: 12px">&nbsp;辽宁忠旺机械设备制造有限公司</span>
                                            <span style="display: block;font-size: 12px;line-height: 20px;font-size: 12px">Liaoning Zhongwang Machinery Equipment Manufacturing Co., Ltd</span>
                                        </div>
                                    </td>
                                    <td rowspan="2" colspan="3" style="width: 200px;height: 100px;padding: 5px" >
                                        <div id="qrCode-div" style="display: none"></div>
                                        <img id="qr-img" width="80px" height="80px">
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="11" style="font-size: 16px;letter-spacing: 4px;">
                                        <span style="font-size: 22px">图纸变更单</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="2" style="width: 8%;font-size: 12px">项目编号</td>
                                    <td style="width: 10%;font-size: 12px">
                                        [[${serviceTaskModel.proCode}]]
                                    </td>
                                    <td style="width: 8%;font-size: 12px">项目名称</td>
                                    <td colspan="3" style="width: 30%;font-size: 12px">
                                        [[${serviceTaskModel.proName}]]
                                    </td>
                                    <td style="width: 8%;font-size: 12px">项目数量</td>
                                    <td style="width: 6%;font-size: 12px">
                                        [[${serviceTaskModel.proNum}]]
                                    </td>
                                    <td style="width: 6%;font-size: 12px">类型</td>
                                    <td style="width: 9%;font-size: 12px">
                                        [[${serviceTaskModel.special}]]
                                    </td>
                                    <td style="width: 6%;font-size: 12px">部分</td>
                                    <td style="width: 9%;font-size: 12px">
                                        [[${serviceTaskModel.part}]]
                                    </td>
                                </tr>
                                <tr >
                                    <td style="width: 4%;">序号</td>
                                    <td colspan="3">图号</td>
                                    <td style="width: 14%">图名</td>
                                    <td colspan="3">变更前描述</td>
                                    <td colspan="3">变更后描述</td>
                                    <td colspan="3">变更原因</td>
                                </tr>
                                </thead>
                                <tbody>
                                <tr th:each="plan : ${drawChange}">
                                    <td th:text="${planStat.count}">1</td>
                                    <td colspan="3" th:text="${plan.drawNo}"   style="text-align:left;"></td>
                                    <td th:text="${plan.drawName}" ></td>
                                    <td colspan="3" valign="top" th:utext="${plan.drawBeforeChange}" style="text-align: left;padding-left: 5px">
                                        <!--                            <div style="text-align: left;padding-left: 5px;padding-top: 5px" th:utext="${plan.drawBeforeChange}"></div>-->
                                        <!--                            <textarea class="comment-textarea" th:text="${plan.drawBeforeChange}" readonly></textarea>-->
                                    </td>
                                    <td colspan="3" valign="top" th:utext="${plan.drawAfterChange}" style="text-align: left;padding-left: 5px;">
                                        <!--                            <div style="text-align: left;padding-left: 5px;padding-top: 5px" th:utext="${plan.drawAfterChange}"></div>-->
                                        <!--                            <textarea class="comment-textarea" th:text="${plan.drawAfterChange}" readonly></textarea>-->
                                    </td>
                                    <td colspan="3" valign="top" th:utext="${plan.changeBeforeReason}" style="text-align: left;padding-left: 5px;">
                                        <!--                            <div style="text-align: left;padding-left: 5px;padding-top: 5px" th:utext="${plan.changeBeforeReason}"></div>-->
                                        <!--                            <textarea class="comment-textarea" th:text="${plan.changeBeforeReason}" readonly></textarea>-->
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="col-xs-1">
                        <table id="t2" class="t2">
                            <thead style="display: table-header-group">
                            <tr><td></td></tr>
                            <tr><td></td></tr>
                            <tr><td></td></tr>
                            <tr><td></td></tr>
                            </thead>
                            <tbody>
                            <tr th:each="plan : ${drawChange}">
                                <td style="text-align: left">
                                    <a target="_blank" style="margin-left: -10px" th:if="${plan.url != null}" th:href="${plan.url}">附件</a>
                                    <span th:if="${plan.url == null}">&nbsp;</span>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="box-body">
                    <form id="queryForm" onsubmit="return false;">
                        <input type="hidden" id="makeSheetId" name="sheetId" th:value="${serviceTaskModel.id}">
                        <input type="hidden" id="makeSheetType" name="sheetType"
                               th:value="${serviceTaskModel.sheetType}">
                    </form>
                    <!--<button type="button" class="btn btn-success" id="btn-receive"-->
                            <!--onclick="selected()"  v-if="form.status === 1" shiro:hasPermission="tec:batchRecep:edit">-->
                        <!--<span class="Bold">接收</span>-->
                    <!--</button>-->
                    <table id="bootstrap-table"></table>
                </div>
            </div>
        </div>
    </div>
</section>
<input type="hidden" id="sheetType" th:value="${serviceTaskModel.sheetType}">
<div th:include="include :: footer"></div>
<script th:inline="javascript">

    let table, columns,
        sheetId = +$("#sheetId").val(),
        sheetType = +$("#sheetType").val();
    let gloDeptName = toUtf8('辽宁忠旺机械设备制造有限公司 ' + [[${serviceTaskModel.deptName}]] + ' ' + [[${serviceTaskModel.sectionName}]]);

    $("#qrCode-div").qrcode({
        width: 80,
        height: 80,
        text: gloDeptName
    });

    /** 选择计划提报类型 */
    function handlerPage() {
        switch (sheetType) {
            case 0:
                columns = [
                    {
                        title: '序号', field: 'id', width: '50',
                        formatter: function (value, row, index) {
                            return index + 1;
                        }
                    },
                    {title: "图号", field: 'drawNo'},
                    {title: "零件名称", field: 'drawName'},
                    {title: "变更前描述", field: 'drawBeforeChange'},
                    {title: "变更后描述", field: 'drawAfterChange'},
                    {title: "变更原因", field: 'changeBeforeReason'},
                    {title: "变更时间", field: 'createTime', width: '300px'},
                    // {
                    //     title: "变更前附件", field: 'url',
                    //     formatter: function (value) {
                    //         if (value) {
                    //             return '<a target="_blank" href="' + value + '">下载</a>'
                    //         }
                    //         return '';
                    //     }
                    // },
                    // {
                    //     title: "变更后附件", field: 'beforeUrl',
                    //     formatter: function (value) {
                    //         if (value) {
                    //             return '<a target="_blank" href="' + value + '">下载</a>'
                    //         }
                    //         return '';
                    //     }
                    // }
                ];
                break;
            case 1:
                columns = [
                    {
                        title: '序号', field: 'id', width: '50',
                        formatter: function (value, row, index) {
                            return index + 1;
                        }
                    },
                    {title: "图号", field: 'drawNo'},
                    {title: "零件名称", field: 'drawName'},
                    {title: "零件数量", field: 'drawNum'},
                    {title: "制作件类型", field: 'makeType'},
                    // {
                    //     title: "附件", field: 'url',
                    //     formatter: function (value) {
                    //         if (value) {
                    //             return '<a target="_blank" href="' + value + '">下载</a>'
                    //         }
                    //         return '';
                    //     }
                    // },
                    {title: "备注", field: 'remark'}
                ];
                break;
            case  2:
                columns = [
                    {
                        title: '序号', field: 'id', width: '50',
                        formatter: function (value, row, index) {
                            return index + 1;
                        }
                    },
                    {title: "图号", field: 'drawNo'},
                    {title: "零件名称", field: 'drawName'},
                    {title: "零件数量", field: 'drawNum'},
                    {title: "制作件类型", field: 'makeType'},
                    {title: "材质", field: 'quality'},
                    // {
                    //     title: "附件", field: 'url',
                    //     formatter: function (value) {
                    //         if (value) {
                    //             return '<a target="_blank" href="' + value + '">下载</a>'
                    //         }
                    //         return '';
                    //     }
                    // },
                    {title: "备注", field: 'remark', width: '300px'},
                    {title: "变更原因", field: 'changeReason', width: '300px'},
                    {title: "变更后图号", field: 'afterDrawNo'},
                    {title: "变更后零件名称", field: 'afterDrawName'},
                    {title: "变更后零件数量" , field: 'afterDrawNum'},
                    {title: "变更后制作件类型", field: 'afterMakeType'},
                    {title: "变更后材质", field: 'afterQuality'},
                    // {
                    //     title: "变更后附件", field: 'afterUrl',
                    //     formatter: function (value) {
                    //         if (value) {
                    //             return '<a target="_blank" href="' + value + '">下载</a>'
                    //         }
                    //         return '';
                    //     }
                    // },
                    {title: "变更后备注", field: 'remark', width: '300px'},
                ];
                break;
        }
    }

    $(function () {
        if([[${serviceTaskModel.receiveStatus}]]==1){
            document.getElementById("btn-receive").style.display="none";
        }
        $("#t1 tr").each(function (i,v) {
            $("#t2 tr").eq(i).find("td").first().height($(this).find("td:first").height());
        })
        let c = document.getElementsByTagName('canvas')[0];
        $("#qr-img").attr("src", c.toDataURL("image/png"));
        // handlerPage();
        // /** 加载列表 */
        // table = js.table.init({
        //     url: ctx + "craft/receive/detail/list",
        //     showExport: false,
        //     columns: columns
        // });


    });

    /** 选择计划 */
    function selected() {
        js.modal.confirm("确定要接收当前单据吗?", function () {
            let makeSheetId = $("#makeSheetId").val();
            let makeSheetType = $("#makeSheetType").val();
            js.post({
                // url:  ctx + 'craft/receive/receiveCard?ids='+arr,
                url: ctx + 'craft/receive/only/receiveCard',
                data: {id: makeSheetId, sheetType: makeSheetType},
                success: function (result) {
                    if (result.type === web_status.SUCCESS) {
                        window.history.go(-1);
                        // js.modal.success(result.msg);
                        // js.table.refresh(table);

                    } else {
                        js.modal.success("请先接收原始单据，再接收变更单！！");
                        // js.modal.warning(result.msg);

                    }
                    js.modal.closeLoading();
                    // location.reload();刷新本页
                }
            })
        });
    }
</script>
</body>
</html>
